<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app" @click="getDivClick">
  <!-- 停止冒泡:.stop貌似只对按钮起作用！ -->
  点我！
  <button @click.stop="getButtonClick">按钮</button>
  <!-- 阻止默认行为 -->
  <!--需要注意一下，那就是form要放在咱们定义的这个app的div当中，不然还是会跳转-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent.stop="getSubmitClick">
  </form>
  <!--  监听键帽抬起来的时候，然后触发事件！-->
  <!--  <input type="text" @click.keyUp="getKeyUpClick"></input>-->
  <!--  <input type="text" @keyDown="getKeyUpClick"></input>-->
  <input type="text" @keyup.enter="getKeyUpClick"/>
  <!--  按钮只有第一次点击的时候有效果！-->
  <input type="submit" @click.stop.once="getOnceClick">
  <button @click.stop="getButtonClick">按钮</button>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '中国牛蛙！'
    },
    methods: {
      getButtonClick() {
        console.log('buttonClick!');
      },
      getDivClick() {
        console.log('divClick');
      },
      getSubmitClick() {
        console.log('submitClick');
      },
      getKeyUpClick() {
        console.log('keyUpClick');
      },
      getOnceClick() {
        console.log('OnceClick');
      }

    }
  })
</script>
</body>
</html>